/**
 * WMS响应式样式
 * 
 * 提供完整的响应式设计支持
 * 针对不同设备和屏幕尺寸优化
 */

/* ================================
 * 响应式断点定义
 * ================================ */

/* 超小屏幕 (phones, 小于 480px) */
@media (max-width: 479.98px) {
  .wms-container {
    padding: var(--wms-padding-sm);
  }
  
  .wms-card {
    margin-bottom: var(--wms-margin-md);
    padding: var(--wms-padding-md);
    border-radius: var(--wms-border-radius-sm);
  }
  
  /* 表格响应式 */
  .wms-table {
    font-size: var(--wms-font-size-xs);
    
    &__header-cell,
    &__body-cell {
      padding: var(--wms-padding-xs) var(--wms-padding-sm);
    }
  }
  
  /* 表单响应式 */
  .wms-form {
    &__item {
      margin-bottom: var(--wms-margin-md);
    }
    
    &__label {
      font-size: var(--wms-font-size-sm);
    }
    
    &__actions {
      text-align: center;
      
      .wms-button {
        width: 100%;
        margin-bottom: var(--wms-margin-sm);
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
  
  /* 分页响应式 */
  .wms-pagination {
    justify-content: center;
    flex-wrap: wrap;
    
    &__info,
    &__sizes,
    &__jumper {
      display: none;
    }
  }
}

/* 小屏幕 (landscape phones, 480px 到 575px) */
@media (min-width: 480px) and (max-width: 575.98px) {
  .wms-container {
    padding: var(--wms-padding-md);
  }
  
  .wms-card {
    padding: var(--wms-padding-lg);
  }
  
  /* 表格响应式调整 */
  .wms-table {
    &__actions {
      flex-direction: column;
      gap: var(--wms-spacing-xs);
      
      .wms-button {
        width: 100%;
      }
    }
  }
  
  /* 表单按钮组调整 */
  .wms-form {
    &__actions {
      .wms-button {
        min-width: 80px;
        margin: 0 var(--wms-margin-xs);
      }
    }
  }
}

/* 中等屏幕 (tablets, 576px 到 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .wms-container {
    max-width: 540px;
    margin: 0 auto;
    padding: var(--wms-padding-lg);
  }
  
  /* 栅格系统调整 */
  .wms-row {
    margin: 0 calc(-1 * var(--wms-spacing-sm));
    
    .wms-col {
      padding: 0 var(--wms-spacing-sm);
    }
  }
  
  /* 导航菜单适配 */
  .wms-menu {
    &--horizontal {
      .wms-menu__item {
        padding: var(--wms-padding-sm) var(--wms-padding-md);
      }
    }
  }
  
  /* 分页器适配 */
  .wms-pagination {
    &__jumper {
      display: none;
    }
  }
}

/* 大屏幕 (small desktops, 768px 到 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .wms-container {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--wms-padding-lg);
  }
  
  /* 表格列宽优化 */
  .wms-table {
    &__actions {
      min-width: 120px;
    }
  }
  
  /* 表单布局优化 */
  .wms-form {
    &--inline {
      .wms-form__item {
        width: calc(50% - var(--wms-margin-sm));
        margin-right: var(--wms-margin-sm);
      }
    }
  }
}

/* 超大屏幕 (large desktops, 992px 到 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .wms-container {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--wms-padding-xl);
  }
  
  /* 侧边栏布局 */
  .wms-layout {
    &--with-sidebar {
      display: flex;
      
      .wms-sidebar {
        width: 200px;
        flex-shrink: 0;
      }
      
      .wms-main {
        flex: 1;
        margin-left: var(--wms-margin-lg);
      }
    }
  }
}

/* 极大屏幕 (xl desktops, 1200px 到 1599px) */
@media (min-width: 1200px) and (max-width: 1599.98px) {
  .wms-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: var(--wms-padding-xl);
  }
  
  /* 多列布局优化 */
  .wms-grid {
    &--3-cols {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--wms-spacing-lg);
    }
    
    &--4-cols {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--wms-spacing-lg);
    }
  }
}

/* 超极大屏幕 (xxl desktops, 1600px 及以上) */
@media (min-width: 1600px) {
  .wms-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: var(--wms-padding-xxl);
  }
  
  /* 宽屏优化 */
  .wms-layout {
    &--wide {
      .wms-sidebar {
        width: 280px;
      }
      
      .wms-content {
        max-width: none;
      }
    }
  }
}

/* ================================
 * 移动端特殊适配
 * ================================ */

/* 移动端通用样式 */
@media (max-width: 767.98px) {
  /* 触摸优化 */
  .wms-touchable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
  }
  
  /* 按钮触摸区域增大 */
  .wms-button {
    min-height: 44px; /* iOS推荐的最小触摸区域 */
    padding: var(--wms-padding-md) var(--wms-padding-lg);
  }
  
  /* 表单输入框优化 */
  .wms-form {
    &__control {
      min-height: 44px;
      font-size: 16px; /* 防止iOS缩放 */
    }
  }
  
  /* 模态框移动端适配 */
  .wms-modal {
    &--mobile {
      width: 95vw;
      max-width: none;
      margin: 0 auto;
      transform: translateY(0);
      border-radius: var(--wms-border-radius-lg) var(--wms-border-radius-lg) 0 0;
      
      /* 底部弹出效果 */
      &.wms-modal--bottom {
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        animation: slideUpFromBottom 0.3s ease-out;
      }
    }
  }
  
  /* 抽屉移动端优化 */
  .wms-drawer {
    &--mobile {
      width: 100vw;
      height: 100vh;
    }
  }
  
  /* 表格移动端滚动 */
  .wms-table {
    &--mobile {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      
      table {
        min-width: 600px;
      }
    }
  }
  
  /* 分页器移动端简化 */
  .wms-pagination {
    &--mobile {
      .wms-pagination__info,
      .wms-pagination__sizes,
      .wms-pagination__jumper {
        display: none;
      }
      
      .wms-pagination__item {
        min-width: 40px;
        height: 40px;
      }
    }
  }
  
  /* 导航菜单移动端适配 */
  .wms-menu {
    &--mobile {
      .wms-menu__item {
        padding: var(--wms-padding-md) var(--wms-padding-lg);
        border-bottom: 1px solid var(--wms-border-color-light);
        
        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
  
  /* 工具栏移动端适配 */
  .wms-toolbar {
    &--mobile {
      flex-wrap: wrap;
      
      .wms-toolbar__left,
      .wms-toolbar__right {
        width: 100%;
        justify-content: center;
        margin-bottom: var(--wms-margin-sm);
      }
    }
  }
}

/* ================================
 * 横屏和竖屏适配
 * ================================ */

/* 横屏适配 */
@media (orientation: landscape) and (max-width: 768px) {
  .wms-modal {
    &--mobile {
      max-height: 90vh;
      overflow-y: auto;
    }
  }
  
  .wms-form {
    &--landscape {
      .wms-form__item {
        display: inline-block;
        width: calc(50% - var(--wms-margin-sm));
        margin-right: var(--wms-margin-sm);
        vertical-align: top;
      }
    }
  }
}

/* 竖屏适配 */
@media (orientation: portrait) and (max-width: 768px) {
  .wms-layout {
    &--portrait {
      flex-direction: column;
      
      .wms-sidebar {
        width: 100%;
        order: 2;
        margin-top: var(--wms-margin-lg);
      }
      
      .wms-main {
        order: 1;
        margin-left: 0;
      }
    }
  }
}

/* ================================
 * 高DPI屏幕适配
 * ================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  /* 高分辨率屏幕优化 */
  .wms-icon {
    &--svg {
      width: 1em;
      height: 1em;
    }
  }
  
  /* 细边框优化 */
  .wms-hairline {
    &::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 200%;
      height: 200%;
      border: 1px solid var(--wms-border-color);
      transform: scale(0.5);
      transform-origin: left top;
      pointer-events: none;
    }
  }
}

/* ================================
 * 打印样式
 * ================================ */

@media print {
  /* 隐藏不必要元素 */
  .wms-button,
  .wms-pagination,
  .wms-toolbar,
  .wms-sidebar {
    display: none !important;
  }
  
  /* 表格打印优化 */
  .wms-table {
    page-break-inside: avoid;
    
    &__header {
      display: table-header-group;
    }
    
    &__body {
      display: table-row-group;
    }
  }
  
  /* 卡片打印优化 */
  .wms-card {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #000;
  }
  
  /* 表单打印优化 */
  .wms-form {
    &__actions {
      display: none;
    }
    
    &__control {
      border-bottom: 1px solid #000;
      background: transparent;
    }
  }
}

/* ================================
 * 动画和过渡效果
 * ================================ */

/* 滑入动画 */
@keyframes slideUpFromBottom {
  from {
    transform: translateX(-50%) translateY(100%);
  }
  to {
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* 淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 缩放动画 */
@keyframes scaleIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ================================
 * 响应式工具类
 * ================================ */

/* 显示/隐藏工具类 */
@media (max-width: 575.98px) {
  .wms-hidden-xs { display: none !important; }
  .wms-visible-xs { display: block !important; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .wms-hidden-sm { display: none !important; }
  .wms-visible-sm { display: block !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .wms-hidden-md { display: none !important; }
  .wms-visible-md { display: block !important; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .wms-hidden-lg { display: none !important; }
  .wms-visible-lg { display: block !important; }
}

@media (min-width: 1200px) {
  .wms-hidden-xl { display: none !important; }
  .wms-visible-xl { display: block !important; }
}

/* 文本对齐响应式 */
@media (max-width: 767.98px) {
  .wms-text-center-mobile { text-align: center !important; }
  .wms-text-left-mobile { text-align: left !important; }
  .wms-text-right-mobile { text-align: right !important; }
}

/* 间距响应式 */
@media (max-width: 767.98px) {
  .wms-p-mobile { padding: var(--wms-padding-sm) !important; }
  .wms-m-mobile { margin: var(--wms-margin-sm) !important; }
  .wms-mt-mobile { margin-top: var(--wms-margin-sm) !important; }
  .wms-mb-mobile { margin-bottom: var(--wms-margin-sm) !important; }
}